<!--
 * @Author: [kangjie]
 * @Date: 2022-04-23 21:44:50
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-04-26 09:10:15
 * @Description: 
-->
<template >
  <div>
    <!--头部 -->
    <div class="header">
      <van-nav-bar
        title="服务产品"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 产品体部 -->
    <div class="productContent">
      <!-- 左侧侧边栏 -->
      <div class="left">
        <van-sidebar v-model="active" @change="toProductDeatils">
          <van-sidebar-item
            v-for="item in categoryData"
            :key="item.id"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <!-- 右侧商品卡片 -->
      <div class="right">
        <van-card
          v-for="item in productData"
          :key="item.id"
          :num="item.number"
          :tag="item.category.name"
          :price="item.price + '.00元'"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
          origin-price="999.00"
        >
          <!-- 放步进器 -->
          <template #footer>
            <van-stepper
              :min='0'
              :default-value='0'
              v-model="item.number"
              theme="round"
              button-size="22"
              disable-input
              @change="totalChange(item)"
            />
          </template>
        </van-card>
      </div>
    </div>
    <div style="height:50px"></div>
    <!-- 底部 -->
    <div class="submit">
      <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import {Toast} from 'vant';
export default {
  data() {
    return {
      // 选中标签的索引
      active: "0",
      // 栏目id
      id: "",
    };
  },
  created() {
    this.findAllCategory();
    // 将默认选中的标签设置为点击的栏目
    this.active = this.$route.query.index;
    this.id = this.$route.query.id;
    this.findAllProdut();
  },
  computed: {
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
    // 引入购物车订单总金额
    ...mapGetters('shopcar',['total'])
  },
  methods: {
    
    // 引入添加购物车的方法
    ...mapMutations('shopcar',['addShopCar','clearShopCar']),
    // 监听步进器的变化
    totalChange(item){
      // item代表的是每一条订单
      // 声明订单对象
      let orderLine={
        id:item.id,
        name:item.name,
        price:item.price,
        number:item.number
      }
      // console.log(orderLine);
      //调用添加购物车的方法
      this.addShopCar(orderLine);
    },
    // 提交订单事件
    onSubmit(){
      if(this.total!=0){
        // 跳转到订单详情页面
        this.$router.push({
          path:'orderConfirm'
        })
      }else{
        Toast('请下单')
      }
    },
    // 左侧导航栏发生切换触发的事件
    toProductDeatils(index) {
      // 将栏目数组中每一项的id赋值给栏目id
      this.id = this.categoryData[index].id;
      this.findAllProdut();
    },
    // 点击左侧按钮事件
    onClickLeft() {
      this.$router.go(-1);
      this.clearShopCar()
    },
    // 引入查询栏目方法
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入查询产品方法
    ...mapActions("product", ["getAllProductData"]),
    // 根据不同栏目查询对应的不同产品
    findAllProdut() {
      let params = {
        page: 1,
        pageSize: 100,
        productCategoryId: this.id,
      };
      this.getAllProductData(params);
    },
    // 获取所有栏目
    findAllCategory() {
      let params = {
        page: 1,
        pageSize: 1000,
      };
      this.getAllCategoryData(params);
    },
  },
};
</script>
<style >
.productContent {
  display: flex;
}
.left {
  width: 80px;
}
.right {
  flex: 1;
  margin-left: 0.3em;
}
</style>